<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			table{
				text-align: center;
				margin: auto;
				border: 1px;
			}
			td,th{
				text-align: center;
				border: 1px solid;
			}
			div{
				text-align: center;
				margin: 50px;
			}
			
		</style>
		
	</head>
	<body>
		
		<div>
		<input type="text" id="id" placeholder="输入编号">
		<input type="text" id="name" placeholder="输入姓名">
		<input type="button" id="btn_add" value="添加">
		</div>
		
		<table>
			<caption>表格</caption>
			<tr>
				<td>
					编号
				</td>
				<td>
					姓名
				</td>
				<td>
					操作
				</td>
			</tr>
			<tr>
				<td>
					b
				</td>
				<td>
					b
				</td>
				<td>
					<a href="javascript:void(0);" onclick="del(this);">删除</a>
				</td>
			</tr>
			<tr>
				<td>
					c
				</td>
				<td>
					c
				</td>
				<td>
					<a href="javascript:void(0);" onclick="del(this);">删除</a>
				</td>
			</tr>
		</table>
		<script>
			document.getElementById("btn_add").onclick=function(){
				var id=document.getElementById("id").value;
				var name=document.getElementById("name").value;
				
				
				var table=document.getElementsByTagName("table")[0];
				//有问题
				table.innerHTML+="<tr>
				<td>
					b
				</td>
				<td>
					b
				</td>
				<td>
					<a href="javascript:void(0);" onclick="del(this);">删除</a>
				</td>
			</tr>";
			}
			
			//调用时this指a,parentNode指td，再tr，在table
			function del(obj){
				var table=obj.parentNode.parentNode.parentNode;
				var tr=obj.parentNode.parentNode;
				table.removeChild(tr);
			}
			
			
		</script>
		
		
	</body>
</html>